<template>
    <div>
        <Form ref="formInline" :model="searchData" inline :label-width="65">
            <FormItem label="昵称:">
                <Input type="text" v-model="searchData.nick" />
            </FormItem>
            <FormItem label="账号:">
                <Input type="text" v-model="searchData.username" />
            </FormItem>
            <FormItem label="手机号:">
                <Input type="text" v-model="searchData.phone" />
            </FormItem>
            <!-- <FormItem label="角色:">
                <Select v-model="searchData.role_id" style="width:200px">
                    <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.role_name }}</Option>
                </Select>
            </FormItem> -->
            <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <showRule name="addAccountBtn">
                <Button @click="showAddDrawer(false)" type="primary" style="margin-left: 10px;">添加账号</Button>
            </showRule>
        </Form>

        <Table :columns="columns" :data="list" border @on-sort-change="sortChange" :highlight-row="true" max-height="600"
            :stripe="true">
            <template slot-scope="{ row , index}" slot="memberSlot">
                <showRule name="editAccountBtn">
                    <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
                        <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer;"
                            @click.stop="showAddDrawer(row)" />
                    </Tooltip>
                </showRule>
                <showRule name="delAccountBtn">
                    <Tooltip content="删除" style="margin-left: 10px;" placement="top">
                        <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer;"
                            @click.stop="statusChange(row.user_id, 0)" />
                    </Tooltip>
                </showRule>
            </template>
        </Table>
        <br>
        <paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </paginate>

        <!-- 添加管理员抽屉 -->
        <Modal :title="adminUserInfo.id > 0 ? '编辑账号' : '添加账号'" @on-ok="adminUserAdd" :draggable="true" v-model="showAdd">
            <Form ref="formValidate" :model="adminUserInfo" :rules="ruleInline" :label-width="100">
                <FormItem label="用户昵称">
                    <Input v-model="adminUserInfo.realname" placeholder="请输入昵称"></Input>
                </FormItem>
                <!-- <FormItem label="所属上级">
                    <Select v-model="adminUserInfo.pid">
                        <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.nick }}</Option>
                    </Select>
                </FormItem> -->
                <!-- <FormItem label="用户头像">
                    <Upload ref="upload" name="image" :headers="header" :action="action_url" :show-upload-list="false"
                        :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
                        <Button icon="ios-cloud-upload-outline">点击上传</Button>
                    </Upload>
                </FormItem> -->
                <!-- <FormItem class="item">
                    <img :src="imgUrl" style="width: 200px;height: 200px;" v-show="imgUrl != ''">
                </FormItem> -->
                <FormItem label="登录账号" prop="username">
                    <Input v-model="adminUserInfo.mobile" placeholder=""></Input>
                </FormItem>
                <FormItem label="登录密码">
                    <Input v-model="adminUserInfo.password" placeholder=""></Input>
                </FormItem>
                <FormItem label="所属部门" prop="dapartment_id">
                    <Select v-model="adminUserInfo.department_id">
                        <Option v-for="item in departmentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="用户角色" prop="role_id" >
                    <RadioGroup v-model="adminUserInfo.role_id">
                        <Radio v-for="item in roleList" :label="item.id" :key="item.id">{{ item.role_name }}</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import paginate from "@/components/paginate/paginate.vue";
import config from "@/config";
import { getToken } from "../../libs/util";
import { Modal } from "view-design";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
export default {
    components: {
        paginate,
        Modal
    },
    data() {
        const validPass = (rule, value, callback) => {

            if (this.adminUserInfo.id !== 0) {
                callback();
            }
            if (value === '') {
                callback(new Error("密码不能为空"));
            }
            callback()
        }
        return {
            action_url: baseUrl + "/image/upload",
            header: { Authorization: getToken() },
            imgUrl: '',
            roleId: 0,
            searchData: {
                page: 1,
                limit: 10,
                role_id:1
            },
            departmentList: [],
            userList: [],
            // 列表
            columns: [
            {
                    title: 'ID',
                    sortable: 'custom',
                    resizable: true,
                    key: 'user_id',
                },
                {
                    title: '登陆账号',
                    sortable: 'custom',
                    resizable: true,
                    key: 'mobile',
                },
                {
                    title: '昵称',
                    key: 'realname',
                    resizable: true,
                    sortable: 'custom',
                },
                {
                    title: '部门',
                    resizable: true,
                    sortable: 'custom',
                    key: 'department_name',
                },
                // {
                //     title: '头像',
                //     sortable: 'custom',
                //     key: 'avatar',
                //     render: (h, param) => {
                //         return h("img", {
                //             attrs: {
                //                 src: param.row.avatar
                //             },
                //             style: {
                //                 width: '50px'
                //             }
                //         });
                //     }
                // },

                {
                    title: '角色',
                    sortable: 'custom',
                    resizable: true,
                    key: 'role_name',
                },
                // {
                //     title: '启用/禁用',
                //     sortable: 'custom',
                //     key: 'role_name',
                //     slot: "statusSlot"
                // },
                {
                    title: '操作',
                    sortable: 'custom',
                    key: 'make',
                    resizable: true,
                    slot: 'memberSlot',
                },
            ],
            // 数据
            list: [],
            total: 0,
            showAdd: false,
            delModal: false,
            delUserId: '',
            // 管理信息
            adminUserInfo: {},
            ruleInline: {
                account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
                password: [{ required: true, validator: validPass, trigger: 'blur' }],
                // role_id: [{ required: true, message: '请选择用户角色', trigger: 'blur', type: "number" }],
            },
            // 角色列表
            roleList: [],

        }
    },
    methods: {
        search() {
            this.searchData.page = 1;
            this.getAdminUserList();
        },
        // 查询管理员信息
        getAdminUserList() {
            let params = {
                ...this.searchData,
            };
            this.$axios('/admin/admin_user/getUserList', params).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        //打开添加管理员抽屉 获取角色列表
        showAddDrawer(row) {
            if (row) {
                this.adminUserInfo.user_id = row.user_id;
                this.adminUserInfo.mobile = row.mobile;
                this.adminUserInfo.realname = row.realname;
                this.adminUserInfo.role_id = row.role_id;
                this.adminUserInfo.department_id = row.department_id;
                this.adminUserInfo.password = '';
            } else {
                this.adminUserInfo = {
                    user_id: 0,
                    realname: '',
                    account: '',
                    password: '',
                    role_id: 1,
                    department_id: '',
                }
            }
            this.showAdd = true;
        },
        changePage(page) {
            this.searchData.page = page;
            this.getAdminUserList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getAdminUserList();
        },
        // 排序
        sortChange(column) {
            let field = column.key;
            if (column.key == 'department_name') {
                field = 'department_id';
            }
            if (column.key == 'role_name') {
                field = 'role_id';
            }
            this.searchData.order_by = field;
            this.searchData.sort = column.order;
            this.getAdminUserList();
        },
        // 添加管理员
        adminUserAdd() {
            this.$refs['formValidate'].validate(valid => {
                if (valid) {
                    this.$axios('/admin/admin_user/add', this.adminUserInfo).then(res => {
                        this.showAdd = false;
                        this.getAdminUserList();
                    });
                }
            })
        },
        //删除确认框
        showDelModal(id) {
            this.delModal = true;
            this.delUserId = id;
        },
        // 启用，禁用
        statusChange(id, status) {
            this.$Modal.confirm({
                title: '删除',
                content: '<p>您确定要删除吗？</p>',
                onOk: () => {
                    this.$axios('/admin/admin_user/del', { id: id, status: status }).then(res => {
                        this.$Message.success('删除成功');
                        this.getAdminUserList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });

        },
        // 获取角色列表
        getRoleList() {
            this.$axios('/admin/role/getNextRoleList', {}).then(res => {
                this.roleList = res;
            });
        },
        // 获取部门列表
        getdepartment() {
            this.$axios('/admin/department/getDepartmentArr').then(data => {
                this.departmentList = data
            })
        },
        handleSuccess(res, file) {
            this.adminUserInfo.avatar = res.data;
            this.imgUrl = res.data;
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        changePage(page) {
            this.searchData.page = page;
            this.getAdminUserList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getAdminUserList();
        },
    },
    created() {
        this.roleId = localStorage.getItem('roleId');
        this.getAdminUserList();
        this.getRoleList();
        this.getdepartment()
    }
}
</script>
<style></style>
